<template>
  <div>

      <ul class="mui-table-view">
          <li class="mui-table-view-cell mui-media" v-for="(item,index) in newslist">
            <router-link v-bind="{to:'./newsView/' + index}">
              <img class="mui-media-object mui-pull-left" :src="item.pic">
              <div class="mui-media-body">
                {{item.title}}
                <p class='mui-ellipsis'>
                  发表时间： {{item.time}}
                  <span>点击： 1</span>
                </p>
              </div>
            </router-link>
          </li>
      </ul>


  </div>
</template>

<script type="text/javascript">
import Vue from 'vue';
  export default {
    data(){
      return {
        newslist: [],
        newsIndex: 0
      }
    },
    methods: {
      //1.获取新闻数据列表
      getnewslist: function(){
        var _this = this;
        // console.log(222)
        this.$http.jsonp('http://api.jisuapi.com/news/get?appkey=986aea6e71ad937d').then(res=>{

            // console.log(res)
          // if(res.body.status !== 0){
          //   alert("请求不到数据")
          //   return false;
          // }
            _this.newslist = res.body.result.list;
            // console.log(_this.newslist)

        })
      },
      // getnewsIndex(index){


      //   this.newsIndex = index;


      //   // Vue.set(this.newsIndex,'key',index)
      //   console.log(this.newsIndex)
      // },

    },
    created: function(){
      this.getnewslist();
    }
  }
</script>

<style type="text/css" scoped>
  .mui-ellipsis{
    color: #0094ff;
  }
  .mui-ellipsis span{
    position: absolute;
    right: 10px;
  }

</style>




